import Taro, {Component} from '@tarojs/taro'
import {connect} from '@tarojs/redux'
import {View, ScrollView, Picker, Button} from '@tarojs/components'
import './index.less'
import {AtIcon, AtButton} from 'taro-ui'

@connect(({companyDetail, houseDetail, companyProductList, businessDetail, loading}) => ({
  companyDetail,
  houseDetail,
  companyProductList,
  businessDetail,
  loading
}))

export default class CompanyDetail extends Component {

  config = {
    navigationBarTitleText: ''
  }

  constructor(props) {
    super(props)
    this.state = {}
  }

  componentWillMount() {
  }

  componentDidMount() {
    const {dispatch} = this.props;
    // 获取列表数据
    dispatch({type: 'companyDetail/loadData'})
  }

  componentWillUnmount() {
  }

  componentDidShow() {
  }

  componentDidHide() {
  }
  // 分享小程序
  onShareAppMessage(options) {
    // 设置菜单中的转发按钮触发转发事件时的转发内容
    var shareObj = {
        title: "江苏厂管家",        // 默认是小程序的名称(可以写slogan等)
        path: `pages/companyDetail/index`,        // 默认是当前页面，必须是以‘/’开头的完整路径
    };
    return shareObj;
}

  choseListData(item) {
    const {dispatch} = this.props;
    dispatch({ type: 'businessDetail/initData' })
    dispatch({
      type: 'businessDetail/updateState',
      payload: {
        loadUrl: 'product',
        id: item.id
      }
    })
    Taro.navigateTo({
      url: `/pages/businessDetail/index`
    })
  }

  render() {
    const {
      companyDetail, dispatch
    } = this.props;
    const {
      name, listData,
      zzzsVisible, ygfcVisible, jycpVisible, qyxxVisible, hzkhVisible, descVisible
    } = companyDetail;
    const updateState = (obj) => {
      dispatch({
        type: 'companyDetail/updateState',
        payload: {
          ...obj
        }
      })
    }

    const bannerList = listData.topImage ? listData.topImage.split(",http") : [];
    const zzzsData = zzzsVisible ? (listData.certificates||[])
      : (listData.certificates||[]).filter((item, i) => i<3);
    const hzkhData = hzkhVisible ? (listData.partners||[])
      : (listData.partners||[]).filter((item, i) => i<3);
    const qyxxData = qyxxVisible ? (listData.others||[])
      : (listData.others||[]).filter((item, i) => i<3);
    const jycpData = (listData.products||[]);
    const ygfcData = ygfcVisible ? (listData.employees||[])
      : (listData.employees||[]).filter((item, i) => i<3);
    const descData = descVisible ? (listData.description||[])
      : (listData.description||'').slice(0,60);


    const zzzsNum = (listData.certificates||[]).length;
    const hzkhNum = (listData.partners||[]).length;
    const qyxxNum = (listData.others||[]).length;
    const jycpNum = (listData.products||[]).length;
    const ygfcNum = (listData.certificates||[]).length;
    const descNum = (listData.description||'').length;

    return (

      <View className='companyDetail'>
        <View className='topBox'>
          {
            bannerList && bannerList[0] ?
              <Swiper
                interval={10000}
                className="swiper-container"
                circular
                indicatorDots
                autoplay
                indicatorColor='#FAFAFA'
                indicatorActiveColor='#026179'
              >
                {
                  bannerList.map((item, index) => (
                    <SwiperItem key={index}>
                      {/* <image src={`${DOWNLOAD + item}`}  className="swiper-img" /> */}
                      <image src={item} className="swiper-img"/>
                    </SwiperItem>
                  ))
                }
              </Swiper>
              :
              <Image className="swiper-img bannerDef" mode="widthFix" src="../../images/banner.png"></Image>
          }
        </View>
        <View className='companyText'>
          {listData.topImage&&<Image src={listData.topImage.split(",http")[0]} className="companyIcon"/>}
          <View className='companyText-child'>
            <View className='child-name'>{listData.businessName}</View>
            <View className='child-discribe'>{listData.districtName||''}
              {/* <View className='child-tab'>豪华版</View> */}
            </View>
          </View>
          {/* <View className='money'>年营业额：1999亿元</View> */}
          <View className='money mainMoney'>主营产品：{listData.businessContent}</View>
          <View className='money'>
            <image src={`../../images/companyDetail/location.png`} mode="widthFix"/>
            {listData.location}
          </View>
          <View className='money'>
            <image src={`../../images/companyDetail/contact.png`} mode="widthFix"/>
            {listData.contact}
          </View>
        </View>
        <View className='companyProfiles'>
          <View className='title'>企业简介</View>
          <View>{descData}</View>
          {(descNum>60)&&!descVisible&&<View className='seeMore'
            onClick={() => {updateState({descVisible:true})}}
          >
            查看更多<AtIcon value='chevron-down' color='#ff505f' size='20'></AtIcon>
          </View>}
        </View>
        <View className='certifications'>
          <View className='title'>资质证书</View>
          {
            zzzsData.map((item,i) => <View className={`${(((i%3)===1))?'picMid':'pic'}`} key={i+'certifications'}>
              <Image
                src={item} className="companyIcon"/>
              {/* <View className='picName'>证书</View> */}
            </View> )
          }
          {(zzzsNum>3)&&<View className='moreBtn' onClick={() => {updateState({zzzsVisible:true})}}>更多</View>}
        </View>
        <View className='partner'>
          <View className='title'>合作客户</View>
          {
            hzkhData.map((item,i) => <View className={`${(((i%3)===1))?'picMid':'pic'}`} key={i+'certifications'}>
              <Image
                src={item} className="companyIcon"/>
            </View> )
          }
          {(hzkhNum>3)&&<View className='moreBtn' onClick={() => {updateState({hzkhVisible:true})}}>更多</View>}
        </View>
        <View className='certifications'>
          <View className='title'>企业形象</View>
          {
            qyxxData.map((item,i) => <View className={`${(((i%3)===1))?'picMid':'pic'}`} key={i+'certifications'}>
              <Image
                src={item} className="companyIcon"/>
              </View> )
          }
          {(qyxxNum>3)&&<View className='moreBtn' onClick={() => {updateState({qyxxVisible:true})}}>更多</View>}
        </View>
        <View className='certifications'>
          <View className='title'>经营产品</View>
          {
            jycpData.map((item,i) => <View className={`${(((i%3)===1))?'picMid':'pic'}`} key={i+'certifications'}>
              <Image
                src={item.topImage} className="companyIcon"
                onClick={this.choseListData.bind(this, item)}
              />
                {/* <View className='picName'>证书</View> */}
            </View> )
          }
          {(jycpNum>3)&&<View className='moreBtn' onClick={() => {
            dispatch({
              type: 'companyProductList/updateState',
              payload: {
                files: jycpData
              }
            })
            Taro.navigateTo({
              url: `/pages/companyProductList/index`
            })
          }}>更多</View>}
        </View>
        <View className='certifications'>
          <View className='title'>员工风采</View>
          {
            ygfcData.map((item,i) => <View className={`${(((i%3)===1))?'picMid':'pic'}`} key={i+'certifications'}>
              <Image
                src={item} className="companyIcon"/>
                {/* <View className='picName'>证书</View> */}
            </View> )
          }
          {(ygfcNum>3)&&<View className='moreBtn' onClick={() => {updateState({ygfcVisible:true})}}>更多</View>}
        </View>
        <canvas canvas-id="myCanvas" />
        <View className='shareBtn'>
          <AtButton className="Btn" openType='share'>
            <View className='tabBarText'>分享</View>
          </AtButton>
        </View>
      </View>
    )
  }
}
